import React from 'react'
import Footer from '../component/Footer'
import '../css/parts.css'
import { Sticky } from 'react-vant';
import { FloatingBubble, Toast } from 'antd-mobile'
import { Input } from "antd";
import { FilterOutline, SearchOutline } from 'antd-mobile-icons'
import { BarsOutlined, RightOutlined } from '@ant-design/icons';
import { ShoppingCart } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';



export default function Parts() {
    const navigate = useNavigate()

    const pat = () => {
        navigate('/home/shopcart');
        console.log(1111);
    }
    return (
        <div className='box-par'>

            <FloatingBubble
                magnetic='x'
                style={{
                    '--initial-position-bottom': '70px',
                    '--initial-position-right': '0px',
                    '--edge-distance': '24px',
                    '--background': 'black',
                    '--border-radius': '20% 0 0 20%',
                    '--size': '60px',
                }}
                onClick={pat}
            >
                <ShoppingCart style={{ fontSize: '38px' }} />
            </FloatingBubble>

            <Sticky>
                <div className="top-par">
                    <BarsOutlined style={{ fontSize: "30px" }} />
                    <SearchOutline className='search-par' />
                    {/* prefix={<SearchOutlined style={{ fontSize: "25px", marginLeft: '80px' }} />} */}
                    <Input className='inp' />
                    <FilterOutline fontSize={30} />
                </div>
            </Sticky>

            <div className='box-kk'>
                <div className='item1-par' >
                    <div className='title-par'>
                        <img src='../img/p1.png' alt="" style={{ width: '100px', height: '100px' }} />
                        <div className='title1-par'>轮毂系统</div>
                    </div>
                    <div className='list-par'>
                        <ul className='num-par'>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </ul>
                        <ul className='name-par'>
                            <li>Weds</li>
                            <li>宏鑫</li>
                            <li>MMX</li>
                            <li>Z-performance</li>
                            <li>Atmos</li>
                            <li>Makstton迈斯盾</li>
                            <li>AVID.1</li>
                            <li>SD Forged</li>
                            <li>Ravize</li>
                            <li>TouchDown</li>
                        </ul>

                    </div>
                    <div className="small">more <RightOutlined style={{ fontSize: "10px" }} /> </div>
                    <img className='more' src="/img/more.png" />
                </div>

                <div className='item2-par' >
                    <div className='title2-par'>
                        <div className='title1-2-par'>制动系统</div>
                        <img src='../img/p2.png' alt="" style={{ width: '100px', height: '100px' }} />
                    </div>
                    <div className='list2-par'>
                        <ul className='name2-par'>
                            <li>刹车卡钳</li>
                            <li>刹车盘</li>
                            <li>刹车皮</li>
                            <li>钢喉</li>
                        </ul>
                        <ul className='num2'>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                        </ul>
                    </div>
                    <div className="small2">more <RightOutlined style={{ fontSize: "10px" }} /> </div>
                    <img className='more2' src="/img/more.png" />
                </div>

                <div className='item3-par' >
                    <div className='title3-par'>
                        <div className='title1-2-par'>外观内饰</div>
                        <img src='../img/p3.png' alt="" style={{ width: '100px', height: '100px' }} />
                    </div>
                    <div className='list2-par'>
                        <ul className='name2-par'>
                            <li>车窗膜</li>
                            <li>车身膜</li>
                            <li>空气套件</li>
                            <li>内饰</li>
                            <li>座椅</li>
                        </ul>
                        <ul className='num2'>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>
                    </div>
                    <div className="small2">more <RightOutlined style={{ fontSize: "10px" }} /> </div>
                    <img className='more2' src="/img/more.png" />
                </div>

                <div className='item4-par' >
                    <div className='title4-par'>
                        <img src='../img/p4.png' alt="" style={{ width: '100px', height: '100px' }} />
                        <div className='title1-par'>油液系统</div>
                    </div>
                    <div className='list-par'>
                        <ul className='num-par4'>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>
                        <ul className='name-par'>
                            <li>机油</li>
                            <li>变速油箱</li>
                            <li>齿轮液</li>
                            <li>冷却液</li>
                            <li>刹车油</li>
                        </ul>

                    </div>
                    <div className="small">more <RightOutlined style={{ fontSize: "10px" }} /> </div>
                    <img className='more' src="/img/more.png" />
                </div>

                <div className='item5-par' >
                    <div className='title5-par'>
                        <div className='title5-2-par'>进气系统</div>
                        <img src='../img/p5.png' alt="" style={{ width: '100px', height: '100px' }} />
                    </div>
                    <div className='list2-par'>
                        <ul className='name5-par'>
                            <li>涡轮增压器</li>
                            <li>进气泄压阀</li>
                            <li>机械增压器</li>
                            <li>进气风箱</li>
                            <li>冬菇头</li>
                            <li>中冷</li>
                        </ul>
                        <ul className='num5'>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                        </ul>
                    </div>
                    <div className="small2">more <RightOutlined style={{ fontSize: "10px" }} /> </div>
                    <img className='more2' src="/img/more.png" />
                </div>

                <div className='item6-par' >
                    <div className='title-par'>
                        <img src='../img/p6.png' alt="" style={{ width: '95px', height: '95px' }} />
                        <div className='title1-par'>发动系统</div>
                    </div>
                    <div className='list-par'>
                        <ul className='num-par6'>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                            <li>11</li>
                            <li>12</li>
                            <li>13</li>
                            <li>14</li>
                            <li>15</li>
                            <li>16</li>
                            <li>17</li>
                            <li>18</li>
                            <li>19</li>
                            <li>20</li>
                            <li>21</li>
                            <li>22</li>
                            <li>23</li>
                            <li>24</li>
                            <li>25</li>
                            <li>26</li>
                            <li>27</li>
                            <li>28</li>
                            <li>29</li>
                            <li>30</li>
                            <li>31</li>
                            <li>32</li>
                            <li>33</li>
                            <li>34</li>
                            <li>35</li>
                            <li>36</li>
                            <li>37</li>
                            <li>38</li>
                            <li>39</li>
                        </ul>

                        <ul className='name-par'>
                            <li>发动机移植</li>
                            <li>曲轴油封</li>
                            <li>气门</li>
                            <li>油壳底</li>
                            <li>张紧器</li>
                            <li>惰轮</li>
                            <li>正时皮带</li>
                            <li>水泵</li>
                            <li>进气歧管</li>
                            <li>机油泵齿轮</li>
                            <li>机油油泵</li>
                            <li>气门顶杯</li>
                            <li>引擎盖</li>
                            <li>凸轮轴油封</li>
                            <li>气门室盖密封圈</li>
                            <li>节气门</li>
                            <li>缸套</li>
                            <li>气门座圈</li>
                            <li>气门导管</li>
                            <li>气门油封</li>
                            <li>平衡盘</li>
                            <li>止推板</li>
                            <li>排气门气门锁片</li>
                            <li>正时齿轮</li>
                            <li>气门锁片</li>
                            <li>缸盖螺栓</li>
                            <li>主瓦螺栓</li>
                            <li>连杆瓦</li>
                            <li>曲轴瓦</li>
                            <li>缸垫</li>
                            <li>钛帽</li>
                            <li>气门弹簧</li>
                            <li>凸轮轴</li>
                            <li>连杆</li>
                            <li>曲轴</li>
                            <li>活塞</li>
                            <li>点火线圈</li>
                            <li>喷油嘴</li>
                            <li>火花塞</li>
                        </ul>

                    </div>
                    <div className="small">more <RightOutlined style={{ fontSize: "10px" }} /> </div>
                    <img className='more' src="/img/more.png" />
                </div>

                <div className='item7-par' >
                    <div className='title7-par'>
                        <div className='title7-2-par'>程序</div>
                        <img src='../img/p7.png' alt="" style={{ width: '100px', height: '100px' }} />
                    </div>
                    <div className='list2-par'>
                        <ul className='name7-par'>
                            <li>ECU电脑程序</li>
                            <li>M-Force</li>
                            <li>ING</li>
                            <li>BM3</li>
                            <li>SCT</li>
                            <li>HDP</li>
                            <li>Daiandone</li>
                            <li>MTM</li>
                            <li>RPM</li>
                            <li>FIT-tuning</li>
                            <li>PP特调</li>
                            <li>Unitronic</li>
                            <li>APR</li>
                            <li>REVO</li>
                            <li>Trifecta</li>
                            <li>外挂电脑</li>
                            <li>TMC</li>
                            <li>Bmc</li>
                            <li>DME</li>
                            <li>Race Chip</li>
                        </ul>
                        <ul className='num7'>
                            <br /><br />
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                            <li>11</li>
                            <li>12</li>
                            <li>13</li>
                            <li>14</li>
                            <br /><br />
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                        </ul>
                    </div>
                    <div className="small2">more <RightOutlined style={{ fontSize: "10px" }} /> </div>
                    <img className='more2' src="/img/more.png" />
                </div>

                <div className='item8-par' >
                    <div className='title8-par'>
                        <div className='title1-2-par'>悬挂系统</div>
                        <img src='../img/p8.png' alt="" style={{ width: '120px', height: '120px' }} />
                    </div>
                    <div className='list2-par'>
                        <ul className='name8-par'>
                            <li>绞牙避震</li>
                            <li>气动避震</li>
                            <li>短簧</li>
                            <li>拉杆</li>
                            <li>防倾杆</li>
                            <li>顶吧</li>
                            <li>底吧</li>
                        </ul>
                        <ul className='num8'>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                        </ul>
                    </div>
                    <div className="small2">more <RightOutlined style={{ fontSize: "10px" }} /> </div>
                    <img className='more2' src="/img/more.png" />
                </div>

                <div className='item9-par' >
                    <div className='title9-par'>
                        <div className='title1-2-par'>排气系统</div>
                        <img src='../img/p9.png' alt="" style={{ width: '100px', height: '100px' }} />
                    </div>
                    <div className='list2-par'>
                        <ul className='name8-par'>
                            <li>等长芭蕉</li>
                            <li>不等长芭蕉</li>
                            <li>排气头段</li>
                            <li>排气泄压阀</li>
                            <li>排气全段</li>
                            <li>头焦</li>
                            <li>排气管</li>
                        </ul>
                        <ul className='num8'>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                        </ul>
                    </div>
                    <div className="small2">more <RightOutlined style={{ fontSize: "10px" }} /> </div>
                    <img className='more2' src="/img/more.png" />
                </div>

                <div className='item10-par' >
                    <div className='title10-par'>
                        <img src='../img/p10.png' alt="" style={{ width: '100px', height: '100px' }} />
                        <div className='title1-par'>传动系统</div>
                    </div>
                    <div className='list-par'>
                        <ul className='num-par4'>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>
                        <ul className='name-par'>
                            <li>AutoExe</li>
                            <li>Want Win</li>
                            <li>ORC</li>
                            <li>KAAZ</li>
                            <li>EXEDY</li>
                        </ul>

                    </div>
                    <div className="small">more <RightOutlined style={{ fontSize: "10px" }} /> </div>
                    <img className='more' src="/img/more.png" />
                </div>

            </div>
            <Footer />
        </div>
    )
}



